<template>
	<view class="action-sheet-mask" @click="hide" v-if="isShow">
		<scroll-view 
			scroll-y 
			class="action-sheet-list" 
			:class="[hideanimation ? 'pt' : 'pb']"
		>
			<view 
				class="action-sheet-item" 
				:class="{active: (activeIndex == index || activeItem == item)}"
				v-for="(item, index) in showList" 
				:key="index"
				@click.stop="clickItem(index)"
			>
				{{item}}
			</view>
			<view class="action-sheet-item action-sheet-cancel" v-if="showCancel" @click.stop="hide">取消</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				required: true
			},
			indexKey: String,
			showCancel: {
				type: Boolean,
				default: true
			},
			activeIndex: {
				type: Number
			},
			activeItem: {
				type: String
			},
			clickClose: {
				type: Boolean,
				default: true
			}
		},
		data (){
			return {
				isShow: false,
				hideanimation: false,
				showList: []
			}
		},
		created() {
			let arr = []
			let indexKey = this.indexKey
			if(indexKey && typeof this.list[0] === 'object'){
				this.list.forEach((item, index)=>{
					arr.push(item[indexKey])
				})
			}else{
				arr = this.list
			}
			this.showList = arr
		},
		methods: {
			clickItem (index){
				this.$emit('confirm', index)
				if(this.clickClose){
					this.hide()
				}
			},
			hide (){
				this.hideanimation = true
				this.$emit('cancel')
				setTimeout(()=>{
					this.isShow = false
				}, 300)
			},
			show (){
				this.isShow = true
				this.hideanimation = false
			},
			setDisplay (flag){
				if(flag){
					this.show()
				}else{
					this.hide()
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.action-sheet-mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		z-index: 999;
	}
	.action-sheet-list{
		position: absolute;
		bottom: 0;
		z-index: 1;
		width: 100%;
		background: #fff;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		max-height: 800upx;
		overflow-y: auto;
	}
	.action-sheet-item{
		border-bottom: 1px var(--border) solid;
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		padding: 0 30upx;
		font-size: 30upx;
		text-align: center;
		&:last-child{
			border-bottom: none;
		}
		&.active{
			color: var(--theme-color);
		}
	}
	.action-sheet-cancel{
		color: #9DACB9;
	}
	.pb{ animation: showtop 0.3s; }
	@keyframes showtop{
	  from { transform: translateY(100%); }
	  to { transform: translateY(0); }
	}
	.pt{ animation: showbottom 0.3s; }
	@keyframes showbottom{
	  from { transform: translateY(0); }
	  to { transform: translateY(100%); }
	}
</style>
